$(function() {
	/* 1. 初始化渲染商品管理页面数据 */
	var currentPage = 1
	var render = function () {
		// 1.1 初始化页面
		getProductData({
			page: currentPage,
			pageSize: 2
		}, function(res) {
			// console.log(res)
			// 1.2 模板渲染
			$('.table tbody').html(template('proTpl', res))
			
			// 2.0 分页展示渲染
			setPaginator(res.page, Math.ceil(res.total / res.size), render)
		})
	}
	render()
	
	/* 2. 分页展示 */
	var setPaginator = function (cp, pages, callback) {
		// 2.1 初始化配置 
        var options = {
        	bootstrapMajorVersion: 3,  // 版本信息
        	size: 'small',             // 字体为小号
        	currentPage: cp,           // 当前页面  
        	totalPages: pages,         // 总页数 
        	onPageClicked: function (event, originalEvent, typePage, curPage) { // 点击页面事件
            	// 事件：typePage是被点击的页码
            	// 2.2 获取当前点击的页数
            	// console.log(curPage)
            	// 2.3 重新请求渲染
            	currentPage = curPage
            	callback && callback()
           	}
        }
		$('.pagination').bootstrapPaginator(options)
	}
	
	/* 3. 添加商品功能之显示模态框 */
	$('#addBtn').on('click', function() {
		// 3.1 显示模态框
		$('#editModal').modal('show')
	})
	
	/* 4. 表单校验 */
	// 4.1 自定以校验规则 http://blog.csdn.net/u013938465/article/details/53507109
	$.fn.bootstrapValidator.validators.checkNum = {
		/**
         * @param {BootstrapValidator} 表单验证实例对象
         * @param {jQuery} $field jQuery 对象
         * @param {Object} 表单验证配置项值
         * @returns {boolean}
        */
        validate: function(validator, $field, options) {
            // 表单输入的值
            var value = $.trim($field.val())

            // options为<validatorOptions>对象，直接.获取需要的值

            // 返回true/false 返回false 代表校验失败
            // 也可返回{ valid : true/false, message: 'XXXX'}
            // 4.1.1 验证不能为空
            if (!value) {
            	return { valid : false, message: '请输入商品库存'}
            }
            // 4.1.2 必须为整数
            if (!/^[1-9]\d*$/.test(value)) {
            	return { valid : false, message: '请输入有效的库存数量'}
            }
            // return reg.test( $field.val() )
			// 1.1.3 如果都不是 则是合法的
			return true
        }
    }
	// 5.3 pic图片验证
	$.fn.bootstrapValidator.validators.checkPic = {
        validate:function (validate, $field, options) {
            if(picLists.length !=3) return {valid: false, message: '请上传三张图片'}
            return true
        }
    }
	$('#form').bootstrapValidator({
        excluded:[], // 不忽略任何情况的表单元素   --- 默认 [':disabled', ':hidden', ':not(:visible)'] 校验插件默认会忽略  隐藏的表单元素
        feedbackIcons: {/*input状态样式图片*/
             valid: 'glyphicon glyphicon-ok',
             invalid: 'glyphicon glyphicon-remove',
             validating: 'glyphicon glyphicon-refresh'
         },
        fields: {// 验证：规则   
            proName: {//验证input项：验证规则
                message: '请输入商品名称',
                validators: {
                    notEmpty: {//非空验证：提示消息
                        message: '请输入商品名称'
                    }
                }
            },
            proDesc: {//验证input项：验证规则
                message: '商品说明不能为空',
                validators: {
                    notEmpty: {//非空验证：提示消息
                        message: '商品说明不能为空'
                    }
                }
            },
            num: {//验证input项：验证规则
                validators: {
                	// 自定义校验规则
                    checkNum: {}
                }
            },
            price: {//验证input项：验证规则
                message: '商品价格不能为空',
                validators: {
                    notEmpty: {//非空验证：提示消息
                        message: '商品价格不能为空'
                    }
                }
            },
            oldPrice: {//验证input项：验证规则
                message: '请输入商品原价',
                validators: {
                    notEmpty: {//非空验证：提示消息
                        message: '请输入商品原价'
                    }
                }
            },
            size: {//验证input项：验证规则
                message: '请输入商品尺码',
                validators: {
                    notEmpty: {//非空验证：提示消息
                        message: '请输入商品尺码'
                    }
                }
            },
            pic: { // 验证input项：验证规则
                message: '请上传图片',
                validators: {
                    checkPic: {//非空验证：提示消息
                        message: '请上传图片'
                    }
                }
            }
        }
    })// 5.4  验证通过发请求
	.on('success.form.bv', function(e) {
        // 5.4 1 禁用默认提交的事件 因为要使用ajax提交而不是默认的提交方式
        e.preventDefault()
        // 5.4.2 获取当前的表单  serialize() 方法通过序列化表单值 序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中
        var $form = $(e.target)
		// console.log($form.serialize()) //  username=itcast&password=111111
        // 5.4.3 发送登录请求
        var data = $form.serialize()
        console.log(data)
        /*图片上传的参数名称*/
        /*picName1=picAddr1*/
        /*picName2=picAddr2*/
        /*picName3=picAddr3*/
        /*每次上传成功记录一下  通过数组*/
        $.each(picLists,function (i,item) {
            data += '&picName' + (i+1) + '='+item.picName + '&picAddr'+(i+1) + '='+item.picAddr
        })
        $.ajax({
            type:'post',
            url:'/product/addProduct',
            data: data,
            dataType:'json',
            success:function (res) {
            	// 5.5 成功请求
                if(res.success){
                    // 5.5.1 关闭模态框
                    $('#editModal').modal('hide')
                    // 5.5.2 重新渲染第一页
                    currentPage = 1
                    render()
                    // 5.5.3 重置表单和验证状态
                    $form[0].reset();
                    $form.data('bootstrapValidator').resetForm()
                    $form.find('img').remove()
                }
            }
        })
    })
	
	/* 5. 初始化图片上传 */
	initUpload()
})
// 初始化获取数据
var getProductData = function(params, callback) {
	$.ajax({
        type: 'get',
        url: '/product/queryProductDetailList',
        data: params,
        dataType: 'json',
        success: function (res) {
            callback && callback(res)
        }
    })
}
// 初始化文件上传
var picLists = [] // 初始一个放上传图片的数组
var initUpload = function () {
    $('.fileupload input[type="file"]').fileupload({
        dataType:'json',
        done:function (e, data) {
        	console.log(data)
        	// 必须放3张
        	if (picLists.length < 3) {
        		// 5.1 预览
        		$('.form-group-imgs').append('<img src="' + data.result.picAddr + '" width="100" height="100" alt="" />')
        		picLists.push(data.result) // {picName:'',picAddr:''}
        		// 三张 更新验证状态
        		if (picLists.length == 3) {
        			$('#form').data('bootstrapValidator').updateStatus('pic','VALID')
        			console.log(picLists)
        		}
        	}
        }
    })
}